<template>
    <div class="semicircle">
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less" >
.semicircle,
.semicircle div {
    /*  Adjust the size of the entire animation here.
      (Remove max size below to go above 300px.) */
    width: 170px;
    height: 170px;
    /* Adjust the speed or timing function of the animation here. */
    animation: 6s rotate141 infinite linear;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.semicircle div {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
}

.semicircle:before,
.semicircle div:before {
    content: "";
    width: 100%;
    height: 50%;
    display: block;
    background: radial-gradient(transparent,
            transparent 65%,
            rgb(178, 176, 176) 65%,
            rgb(247, 225, 225));
    background-size: 100% 200%;
}

@keyframes rotate141 {
    to {
        transform: rotate(360deg);
    }
}
</style>